//登录
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
  
import '../css/login.scss';

import { WhiteSpace, Button, InputItem,List,Modal} from 'antd-mobile';

import { post, get } from '../http/Fetch';

import URL from '../http/URL';
import { ToastShow, Log, LogError } from '../utils/CommonUtil';


class Login extends React.Component {

    // 构造
    constructor(props) {  
        super(props);
        this.state = {
            loginNameSelect:false,
            passwordSelect: false,
            loginNameDelete: false,
            passwordDelete: false,
            btnFontColor:'#26A2FF',
            btnBgColor: 'white',
            btnBgEndColor: 'white',
            loginName:'',//'sjgyadmin' xymadmin,
            password:'',//'sjgy123456'
        }
    }

    componentWillMount(){

        if (window.originalPostMessage) {
            //window.postMessage("routerLogin");
        }
    }

    componentDidMount() {
        
    }

    render() {
        let that = this;
        //style={{ height: document.body.offsetHeight}}

        return <div id="login-contain" class="login-contain"  style={{ height:'100%'}}>

            <div>
                <div class="login-header-contain">
                    <img class="login-logo" src={require('../images/login/logo.png')} />
                    <span>园区安环管家平台</span>
                </div>

                <div id="login-center-contain" className="login-center-contain">
                <div id="loginname-contain" class="loginname-contain">
                    {
                        // value = "sjgyadmin" value="sjgy123456"
                    }

                    <input value={this.state.loginName} ref="loginName" placeholder="输入用户名" onBlur={() => {
                        this.setState({ loginNameSelect: false });
                        setTimeout(
                            () => { this.setState({ loginNameDelete: false }); },
                            100
                        );
                    }}
                        onFocus={(e) => {
                            this.setState({ loginNameSelect: true });
                            if (e.target.value.length > 0) {
                                this.setState({ loginNameDelete: true });
                            } else {
                                this.setState({ loginNameDelete: false });
                            }
                            setTimeout(function(){
                                let pannel = document.getElementById("login-center-contain");
                                pannel.scrollIntoView(true);
                            },200)
                        }}
                        
                        onClick={()=>{
                            setTimeout(function(){
                                let pannel = document.getElementById("login-center-contain");
                                pannel.scrollIntoView(true);
                            },200)
                        }}

                        onChange={(e) => {
                            if (e.target.value.length > 0) {
                                this.setState({ loginNameDelete: true });
                            } else {
                                this.setState({ loginNameDelete: false });
                            }
                            
                            if (this.refs.password.value.length > 0 && this.refs.loginName.value.length > 0) {
                                this.setState({ btnFontColor: 'white', btnBgColor: '#339FFF', btnBgEndColor: '#3279FF' });
                            } else {
                                this.setState({ btnFontColor: '#26A2FF', btnBgColor: 'white', btnBgEndColor: 'white' });
                            }

                            this.setState({ loginName: e.target.value });

                        }}
                    />
                    <img style={{ display: this.state.loginNameDelete ? '' : 'none' }} src={require('../images/login/close.png')}
                        onClick={() => {
                            Log(this.refs.loginName.value);
                            this.refs.loginName.value = '';
                            this.setState({ loginName:''});
                            this.setState({ loginNameDelete: false });
                        }} />

                </div>
                
                <div style={{ display: this.state.loginNameSelect ? "":""}} class="input-bottom-line"></div>
                
                <div id="password-contain" class="password-contain">
                    <input id="pwd" value={this.state.password} type="password" ref="password" placeholder="输入密码" onBlur={() => {
                        this.setState({ passwordSelect: false });
                        setTimeout(
                            () => { this.setState({ passwordDelete: false }); },
                            100
                        );
                    }}
                        onFocus={(e) => {
                            this.setState({ passwordSelect: true });
                            if (e.target.value.length > 0) {
                                this.setState({ passwordDelete: true });
                            } else {
                                this.setState({ passwordDelete: false });
                            }
                            setTimeout(function(){
                                let pannel = document.getElementById("login-center-contain");
                                pannel.scrollIntoView(true);
                            },200)

                        }}

                        onClick={()=>{
                            setTimeout(function(){
                                let pannel = document.getElementById("login-center-contain");
                                pannel.scrollIntoView(true);
                            },200)
                        }}

                        onChange={(e) => {
                            if (e.target.value.length > 0) {
                                this.setState({ passwordDelete: true });
                            } else {
                                this.setState({ passwordDelete: false });
                            }
                            
                            if (this.refs.password.value.length > 0 && this.refs.loginName.value.length > 0){
                                this.setState({ btnFontColor: 'white', btnBgColor: '#339FFF', btnBgEndColor: '#3279FF' });
                            } else {
                                this.setState({ btnFontColor: '#26A2FF', btnBgColor: 'white', btnBgEndColor: 'white' });
                            }

                            this.setState({ password: e.target.value});

                        }}
                    />
                    <img style={{ display: this.state.passwordDelete ? '' : 'none' }} src={require('../images/login/close.png')}
                        onClick={() => {
                            Log(this.refs.password.value);
                            this.refs.password.value = '';
                            this.setState({ password:''});
                            this.setState({ passwordDelete: false });
                        }} />

                </div>
                
                <div style={{ display: this.state.passwordSelect ? "":""}} class="input-bottom-line"></div>
                
                <Button onClick={
                        ()=>{
                            let loginName = this.refs.loginName.value;
                            let password = this.refs.password.value;
                            if (loginName && password) {
                                
                                let params = {
                                    loginName: loginName,
                                    password: password,
                                    sim:'123',
                                };
                                const result = post(URL.getLoginInfo, params, this,function (data) {
                                    
                                    if (data.stat == "1") {
                                        that.props.history.push('/');
                                        
                                    } else {
                                        ToastShow(data.message);
                                    }
                                });  
                            }
                        }
                    }>登录</Button>
                    <div style={{height:20}}></div>
                    <div>
                    </div>
                    </div>
                </div>

        </div>
    }

}

export default Login;